<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        font-size: 12px;
      }
      .content {
        display: flex;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div style="padding: 20px; text-align: left">
        <button style="margin-left: 20px">
          <a href="../index.html">主要</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./trackPlayback.html">轨迹回放</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./marker-text-label.html">点标记</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./markerclusterer.html">点聚合</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./mapType.html">地图类型切换</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./graph.html">画图</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./infoWindow.html">信息弹框</a>
        </button>
        <button style="margin-left: 20px">
          <a href="./tool.html">工具栏</a>
        </button>
      </div>
      <div class="content">
        <div id="map" style="flex: auto; height: 700px"></div>
        <!-- <div>This **word** is bold. This <em>word</em> is italic.</div> -->
      </div>
    </div>
    <div style="padding: 20px; text-align: left; font-size: 18px">
      <div class="graph-select">
        <label for="selected">新增图形</label>
        <select name="selected" id="selected">
          <option value=""></option>
          <option value="Point">点</option>
          <option value="Line">线</option>
          <option value="Circle">圆形</option>
          <option value="Polygon">多边形</option>
          <option value="Rectangle">矩形</option>
        </select>
      </div>

      <div class="point">
        <span>点：</span>
        <button id="showPoint">显示点</button>
        <button id="hidePoint">隐藏点</button>
        <button id="removePoint">删除点</button>
      </div>
      <div class="line">
        <span>线：</span>
        <button id="showLine">显示线</button>
        <button id="hideLine">隐藏线</button>
        <button id="removeLine">删除线</button>
      </div>
      <div class="circle">
        <span>圆形：</span>
        <button id="showCircle">显示圆形</button>
        <button id="hideCircle">隐藏圆形</button>
        <button id="removeCircle">删除圆形</button>
      </div>
      <div class="polygon">
        <span>多边形：</span>
        <button id="showPolygon">显示多边形</button>
        <button id="hidePolygon">隐藏多边形</button>
        <button id="removePolygon">删除多边形</button>
      </div>
      <div class="rectangle">
        <span>矩形：</span>
        <button id="showRectangle">显示矩形</button>
        <button id="hideRectangle">隐藏矩形</button>
        <button id="removeRectangle">删除矩形</button>
      </div>
      <div class="edit">
        <button id="startEdit">开始编辑图形</button>
        <button id="endEdit">结束编辑图形</button>
      </div>
      <div class="draw">
        <button id="deleteDraw">删除主动绘制</button>
      </div>
    </div>
    <script type="module" src="./graph.js"></script>
  </body>
</html>
